<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检查浏览器是否支持WebGL</title>
    <style>
        body {
            text-align : center;
        }
        button {
            display : block;
            font-size : inherit;
            margin : auto;
            padding : 0.6em;
        }

    </style>
</head>
<body>
    <p>[ Here would go the result of WebGL feature detection ]</p>
    <button>Press here to detect WebGLRenderingContext</button>
    <script>
        window.addEventListener("load", function() {
        var paragraph = document.querySelector("p"),
            button = document.querySelector("button");
        button.addEventListener("click", detectWebGLContext, false);
        function detectWebGLContext () {
            var canvas = document.createElement("canvas");
            var gl = canvas.getContext("webgl")|| canvas.getContext("experimental-webgl");
            if (gl && gl instanceof WebGLRenderingContext) {
                // WebGL 渲染的上下文(WebGLRenderingContext)是一个接口，通过它你可以设置和查询绘图器的状态，发送数据到 WebGL，执行绘制命令
                paragraph.innerHTML ="Congratulations! Your browser supports WebGL.";
            } else {
                paragraph.innerHTML = "Failed to get WebGL context. "+ "Your browser or device may not support WebGL.";
            }
        }
        }, false);
    </script>
</body>
</html>